<template>
  <el-container class="crud">
    <el-header>
      <div class="query-container">
        <el-row>
          <el-col :span="18">
            <BaseForm ref="QueryForm" :formItemConfigGroup="queryFormItemConfigGroup" />
          </el-col>
          <el-col :span="6">
            <div class="query-button">
              <el-button type="primary" @click="loadData">查询</el-button>
              <el-button @click="resetQueryForm">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="operation-button">
        <el-button @click="deleteById">删除</el-button>
      </div>
    </el-header>
    <el-main>
      <BaseTable
        ref="BaseTable"
        :isShowSelection="true"
        :tableColumnConfig="tableColumnConfig"
        @handleSelectionChange="handleSelectionChange"
      >
        <template v-slot:operation>
          <el-table-column fixed="right" label="操作" width="120">
            <template #default="scope">
              <el-button @click="findForm(scope.row.id)">查看表单</el-button>
            </template>
          </el-table-column>
        </template>
      </BaseTable>
    </el-main>
    <el-footer>
      <BasePagination
        @handleCurrentChange="handleCurrentChange"
        @handleSizeChange="handleSizeChange"
        :totalPage="totalPage"
      />
    </el-footer>
  </el-container>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import BaseTable from "@/components/base-table.vue";
import BaseForm from "@/components/base-form.vue";
import BasePagination from "@/components/base-pagination.vue";
import customFormSubmitApi from "@/api/custom-form-submit.api";
import moment from "moment";
import {
  FormItemConfigGroup,
  TableColumnConfig,
  FormType,
  BaseTableComponent,
  BaseFormComponent,
} from "@/component-interface";
import { ElMessage, ElMessageBox } from "element-plus";
import BaseUploadC from "@/components/base-upload-c.vue";
export default defineComponent({
  name: "CustomForm",
  components: { BaseTable, BasePagination, BaseForm, BaseUploadC },
  data() {
    return {
      selection: [],
      tableData: [],
      tableColumnConfig: [
        {
          label: "创建时间",
          prop: "createdDate",
          translate: (date: string) => {
            return moment(date).format("YYYY-MM-DD HH:mm:ss");
          },
        },
        {
          label: "更新时间",
          prop: "updatedDate",
          translate: (date: string) => {
            return moment(date).format("YYYY-MM-DD HH:mm:ss");
          },
        },
      ] as TableColumnConfig,
      queryFormItemConfigGroup: [
        {
          label: "日期",
          prop: "date",
          type: FormType.ElDatePicker,
          span: 6,
          attrs: {
            type: "daterange",
            "range-separator": "到",
            "start-placeholder": "开始时间",
            "end-placeholder": "结束时间",
            "value-format":"YYYY-MM-DD"
          },
        },
      ],
      totalPage: 10,
      querys: {
        take: 10,
        skip: 0,
      },
    };
  },
  methods: {
    getQueryData() {
      return { date: [] };
    },
    initQueryData() {
      (this.$refs.QueryForm as BaseFormComponent).setFormData(
        this.getQueryData()
      );
    },
    loadData() {
      const queryFormData = (
        this.$refs.QueryForm as BaseFormComponent
      ).getFormData();
      const [startTime, endTime] = queryFormData.date;
      customFormSubmitApi
        .find({ ...this.querys, ...queryFormData, startTime, endTime })
        .then((res) => {
          this.tableData = res.data.content.result;
          this.totalPage = res.data.content.total;
          (this.$refs.BaseTable as BaseTableComponent).setTableData(
            this.tableData
          );
        });
    },
    resetQueryForm() {
      this.initQueryData();
      this.loadData();
    },
    handleSelectionChange(val: []) {
      this.selection = val;
    },
    handleCurrentChange(page: number) {
      this.querys.skip = (page - 1) * this.querys.take;
      this.loadData();
    },
    handleSizeChange(size: number) {
      this.querys.take = size;
      this.loadData();
    },
    getFormData() {
      return { tableName: "" };
    },
    deleteById() {
      if (this.selection.length === 1) {
        ElMessageBox.confirm(
          '确定要删除吗',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then(() => {
            customFormSubmitApi.delete((this.selection[0] as any).id).then((res) => {
              const { code } = res.data;
              ElMessage({
                message: code === 0 ? "删除成功" : "删除失败",
                type: code === 0 ? "success" : "error",
              });
              this.loadData();
            });
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '取消',
            })
          })

      } else {
        ElMessage({
          message: "请选且仅选择一行",
          type: "error",
        });
      }
    },
    findForm(id: string) {
      this.$router.push({ path: "customFormSubmitDetail", query: { submitId: id } })
    }
  },
  mounted() {
    this.initQueryData();
    this.loadData();
  },
});
</script>

<style lang="scss" scoped>
</style>
